// 活动详情
<template>
  <div class="activity_detail">
    <!-- 图片 -->
    <img src="../assets/img/activity.jpg" alt="活动展示" style="width:100%;height:300px;" />
    <Spin size="large" fix v-if="spinShow"></Spin>

    <div class="main">
      <Row type="flex" justify="space-between" class="code-row-bg row1">
        <Col span="18">
          <!-- 导航 -->
          <div class="nav flex align_items_centeer">
            <a href="/index" style="padding-top:5px;">
              <img src="../assets/img/home.png" alt="home" class="home_img" />
            </a>
            <span style="padding-left:10px;">>></span>
            <a href="activity">活动中心</a>
            <span style="padding-left:10px;">>></span>
            <p style="color:#515a6e;margin-left:10px;">{{activity.activityName}}</p>
          </div>

          <!-- 活动名片 -->
          <Card class="detail">
            <div class="up_bg">
              <img :src="activity.photos||'/static/default_team_img.png'" alt="社团主题图" />
              <p class="activity_name">{{activity.activityName}}</p>
            </div>
            <div class="down_bg">
              <p>
                <img src="../assets/img/calender_logo.png" alt="创建时间_logo" />
                举办时间:{{activity.createTime}}
                <span
                  style="display:inline-block;width:20px;"
                ></span>
                <img src="../assets/img/person_logo.png" alt="成员_logo" />
                举办社团:{{activity.teamname}}
              </p>
            </div>
          </Card>

          <!-- 活动详情 -->
          <Card class="content">
            <ul>
              <li>
                <strong>活动名称</strong>
                :{{activity.activityName}}
              </li>
              <li>
                <strong>举办方</strong>
                :{{activity.teamname}}
              </li>
              <li>
                <strong>活动地点</strong>
                :{{activity.address}}
              </li>
              <li>
                <strong>活动时间</strong>
                :{{activity.createTime}}
              </li>
              <li>
                <strong>活动简介</strong>
                :{{activity.summary}}
              </li>
              <li>
                <strong>活动详情</strong>
                :{{activity.description}}
              </li>
            </ul>
          </Card>
        </Col>
        <Col span="5">
          <Card class="mt20">
            <div class="flex align_items_centeer">
              <div class="blue_column"></div>
              <span style="margin-left:10px;font-size:18px;">热门活动</span>
            </div>

            <Timeline class="mt20">
              <TimelineItem v-for="item in activityList" :key="item.id">
                <p class="time">{{item.createTime}}</p>
                <div style="line-height:20px;border-bottom:1px dashed #ccc;">
                  <router-link :to="{path:'activity_detail',query:{activityId:item.id}}">
                    <div>
                      <p class="ml10 activity_title">{{item.activityName}}</p>
                      <p class="ml10">举办方:{{item.teamname}}</p>
                      <p class="ml10 address">举办地点:{{item.address}}</p>
                    </div>
                  </router-link>
                </div>
              </TimelineItem>
            </Timeline>
          </Card>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import ActivityService from "../assets/js/activity";
export default {
  name: "activity_detail",
  data() {
    return {
      id: 0, //当前活动id
      activity: {}, //当前活动
      spinShow: false, //缓冲
      params: {
        current: 1,
        size: 4,
        teamId: -1
      }, //获取活动列表的参数
      activityList: [] //活动列表
    };
  },
  methods: {
    // 获取活动列表
    getActivity() {
      this.spinShow = true;
      ActivityService.getActivity(this.params).then(res => {
        if (res.code == 0) {
          this.activityList = res.data.records;
          this.total = res.data.total;
        } else {
          this.$Message.error(res.msg);
        }
        this.spinShow = false;
      });
    },
    //获取当前活动详情
    getActivityById() {
      let vm = this;
      vm.spinShow = true;
      ActivityService.getActivityById(vm.id).then(res => {
        if (res.code == 0) {
          vm.activity = res.data;
        } else {
          vm.$Message.error(res.msg);
        }
      });
      vm.spinShow = false;
    }
  },
  created() {
    this.id = this.$route.query.activityId;
    this.getActivityById();
    this.getActivity();
  },
  watch: {
    $route() {
      this.id = this.$route.query.activityId;
      this.getActivityById();
      this.getActivity();
    }
  }
};
</script>
<style lang="scss">
.activity_detail .nav {
  margin-top: 20px;
  border: 1px solid #dcdee2;
  border-color: #e8eaec;
  background: #fff;
  border-radius: 4px;
  font-size: 14px;
  position: relative;
  transition: all 0.2s ease-in-out;
  color: $base_color;
}

.activity_detail .nav a {
  color: $base_color;
  margin-left: 10px;
}

.activity_detail .nav .home_img {
  height: 20px;
}

// 活动名片
.activity_detail .detail {
  margin-top: 15px;
}
.activity_detail .detail .up_bg {
  background-color: $base_color;
  height: 100px;
  border-radius: 5px 5px 0 0;
  position: relative;
}
// 社团主题图
.activity_detail .detail .up_bg img {
  height: 140px;
  width: 140px;
  border-radius: 50%;
  border: 5px solid #fff;
  position: absolute;
  left: 50px;
  top: 30px;
}
.activity_detail .detail .up_bg img:hover {
  transform: scale(1.2);
}
.activity_detail .detail .up_bg .activity_name {
  color: #fff;
  margin-left: 220px;
  font-size: 20px;
  font-weight: bold;
  padding-top: 60px;
}
.activity_detail .detail .down_bg {
  background-color: $base_bg;
  height: 100px;
  border-radius: 0 0 5px 5px;
}
.activity_detail .detail .down_bg img {
  vertical-align: sub;
}
.activity_detail .detail .down_bg p {
  margin-left: 220px;
  padding-top: 15px;
  color: $base_color;
}

// 活动详情介绍
.activity_detail .content {
  margin-top: 15px;
}
.activity_detail .content li {
  margin-top: 10px;
  line-height: 30px;
}
.activity_detail .activity_title {
  color: $base_color;
  font-weight: bold;
  padding-top: 10px;
}
</style>